<template>
  <view class="coupon-container">
    <div class="tabs">
      <span class="tab" @click="selectTab('all')">全部</span>
      <span class="tab" @click="selectTab('travel')">出行</span>
      <span class="tab" @click="selectTab('owner')">车主</span>
      <span class="tab" @click="selectTab('gui')">使用规则</span>
      <span class="tab" @click="selectTab('history')">历史券</span>
    </div>
    <ul>
      <li v-for="coupon in filteredCoupons" :key="coupon.id" class="coupon-item">
        <p class="coupon-code">优惠码: {{ coupon.code }}</p>
        <p class="coupon-discount">折扣: {{ coupon.discount }}%</p>
        <p class="coupon-expiry">有效期: {{ coupon.expiryDate }}</p>
        <button class="redeem-button" @click="redeemCoupon(coupon.id)">立即领取</button>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedTab: 'all',
      coupons: [
        { id: 1, code: 'SAVE10', discount: 10, expiryDate: '2023-12-31', category: 'travel' },
        { id: 2, code: 'SAVE20', discount: 20, expiryDate: '2023-11-30', category: 'owner' },
        { id: 3, code: 'SAVE30', discount: 30, expiryDate: '2023-10-31', category: 'all' },
      ],
    };
  },
  computed: {
    filteredCoupons() {
      if (this.selectedTab === 'all') {
        return this.coupons;
      }
      return this.coupons.filter(coupon => coupon.category === this.selectedTab);
    },
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
    redeemCoupon(couponId) {
      console.log(`领取优惠卷ID: ${couponId}`);
    },
  },
};
</script>

<style scoped>
.coupon-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.tab {
  color: #d81e06; /* 文本颜色 */
  cursor: pointer;
  padding: 10px; /* 添加内边距 */
  transition: background-color 0.3s; /* 添加平滑过渡效果 */
}

.tab:hover {
  background-color: #9c2516; /* 悬停时更改背景颜色 */
  border-radius: 5px; /* 添加圆角 */
}

.coupon-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  position: relative;
}

.coupon-code {
  font-weight: bold;
}

.coupon-discount {
  color: green;
}

.coupon-expiry {
  color: gray;
}

.redeem-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #d81e06;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.redeem-button:hover {
  background-color: #9c2516;
}
</style>
